<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element UI 组件示例</title>
  <link rel="stylesheet" href="./theme/index.css">
  <link rel="stylesheet" href="./theme/custom.css">
  <!-- <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet"> -->
   <style>
    #app {
      width: 1280px;
      margin: 0 auto;
      max-width: 95%;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      font-size: 12px;
      font-weight: 400;
      color: #000;
      line-height: 1.7142857142857142;
    }
   </style>
</head>
<body>

  <div id="app">
    <el-header>
      <h1>Element UI 组件示例</h1>
    </el-header>

    <el-container>
      <el-main>  
        <h2>按钮</h2>
        <div>
          <el-button type="primary" size="large">主要按钮</el-button>
          <el-button size="medium">普通按钮</el-button>
          <el-button :disabled="true" size="small">禁用按钮</el-button>
          <el-button type="success" size="medium">成功按钮</el-button>
          <el-button type="info" size="medium">信息按钮</el-button>
          <el-button type="warning" size="medium">警告按钮</el-button>
          <el-button type="danger" size="medium">危险按钮</el-button>
          <el-button type="text" size="medium">文字按钮</el-button>
          <el-button type="primary" icon="el-icon-edit" title="图标按钮" size="medium"></el-button>
          <el-button type="primary" icon="el-icon-search" title="图标按钮" size="medium">搜索</el-button>
        </div>
        <el-divider></el-divider>
        <!-- <h2>文字链接</h2>
        <div>
          <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
          <el-link type="primary">主要链接</el-link>
          <el-link type="success">成功链接</el-link>
          <el-link type="warning">警告链接</el-link>
          <el-link type="danger">危险链接</el-link>
          <el-link type="info">信息链接</el-link>
        </div> -->
        <h2>步骤条</h2>
        <div style="height: 300px;">
          <el-steps direction="vertical" :active="2" finish-status="success">
            <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
            <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
            <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
            <el-step title="步骤 4" description="这是一段很长很长很长的描述性文字"></el-step>
          </el-steps>
        </div>
        <el-divider></el-divider>
        
        <h2>Radio</h2>
        <div>
          <el-radio-group v-model="radio">
            <el-radio label="1" disabled>选项1</el-radio>
            <el-radio label="2">选项2</el-radio>
            <el-radio label="3">选项3</el-radio>
          </el-radio-group>
        </div>
        <el-divider></el-divider>

        <h2>Checkbox</h2>
        <div>
          <el-checkbox-group v-model="checkbox">
            <el-checkbox label="1">选项A</el-checkbox>
            <el-checkbox label="2">选项B</el-checkbox>
            <el-checkbox label="3">选项C</el-checkbox>
          </el-checkbox-group>
        </div>
        <el-divider></el-divider>

        <h2>Input</h2>
        <div>
          <el-input v-model="inputText" placeholder="请输入内容"></el-input>
        </div>
        <el-divider></el-divider>

        <h2>InputNumber</h2>
        <div>
          <el-input-number v-model="inputNumber" :min="1" :max="10"></el-input-number>
        </div>
        <el-divider></el-divider>

        <h2>Select</h2>
        <div>
          <el-select v-model="selected" placeholder="请选择">
            <el-option label="选项1" value="option1"></el-option>
            <el-option label="选项2" value="option2"></el-option>
            <el-option label="选项3" value="option3"></el-option>
          </el-select>
        </div>
        <el-divider></el-divider>

        <h2>Cascader</h2>
        <div>
          <el-cascader
            v-model="cascaderValue"
            :options="cascaderOptions"
            placeholder="请选择">
          </el-cascader>
        </div>
        <el-divider></el-divider>

        <h2>Switch</h2>
        <div>
          <el-switch v-model="switchValue"></el-switch>
        </div>
        <el-divider></el-divider>

        <h2>Slider</h2>
        <div>
          <el-slider v-model="sliderValue" :min="0" :max="100"></el-slider>
        </div>
        <el-divider></el-divider>

        <h2>DatePicker</h2>
        <div>
          <el-date-picker
            v-model="date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <el-divider></el-divider>

        <h2>Rate</h2>
        <div>
          <el-rate v-model="rate"></el-rate>
        </div>
        <el-divider></el-divider>

        <h2>Transfer</h2>
        <div>
          <el-transfer
            v-model="transferValue"
            :data="transferOptions"
            filterable
            filter-placeholder="请输入搜索内容"
            title-left="源"
            title-right="目标">
          </el-transfer>
        </div>
        <el-divider></el-divider>

        <h2>Table</h2>
        <div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </div>
        <el-divider></el-divider>

        <h2>Tag</h2>
        <div>
          <el-tag type="success" closable>成功</el-tag>
          <el-tag type="info" closable>信息</el-tag>
          <el-tag type="warning" closable>警告</el-tag>
          <el-tag type="danger" closable>危险</el-tag>
        </div>
        <el-divider></el-divider>

        <h2>Progress</h2>
        <div>
          <el-progress :percentage="70"></el-progress>
          <br>
          <el-progress :percentage="70" status="exception"></el-progress>
          <br>
          <el-progress :percentage="100" status="success"></el-progress>
          <br>
          <el-progress type="circle" :width="160" :stroke-width="12" define-back-color="#F0F0F0" stroke-linecap="dashboard" :percentage="0"></el-progress>
          <el-progress type="circle" :width="160" :stroke-width="12" define-back-color="#F0F0F0" stroke-linecap="dashboard" :percentage="25"></el-progress>
          <el-progress type="circle" :width="160" :stroke-width="12" define-back-color="#F0F0F0" stroke-linecap="dashboard" :percentage="100" status="success"></el-progress>
          <el-progress type="circle" :width="160" :stroke-width="12" define-back-color="#F0F0F0" stroke-linecap="dashboard" :percentage="70" status="warning"></el-progress>
          <el-progress type="circle" :width="160" :stroke-width="12" define-back-color="#F0F0F0" stroke-linecap="dashboard" :percentage="50" status="exception"></el-progress>
        </div>
        <el-divider></el-divider>

        <h2>Tree</h2>
        <div>
          <el-tree
            :data="treeData"
            :props="defaultProps">
          </el-tree>
        </div>
        <el-divider></el-divider>

        <h2>Pagination</h2>
        <div>
          <el-pagination background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalItems"
            layout="total, prev, pager, next, sizes">
          </el-pagination>
        </div>
        <el-divider></el-divider>

        <h2>Badge</h2>
        <div>
          <el-badge value="99+" :is-dot="false">
            <el-button>未读消息</el-button>
          </el-badge>
        </div>
        <el-divider></el-divider>


        <h2>Alert</h2>
        <div>
          
          <el-alert show-icon
            title="成功提示的文案"
            type="success">
          </el-alert>
          <br>
          <el-alert show-icon
            title="消息提示的文案"
            type="info">
          </el-alert>
          <br>
          <el-alert show-icon
            title="警告提示的文案"
            type="warning">
          </el-alert>
          <br>
          <el-alert show-icon
            title="错误提示的文案"
            type="error">
          </el-alert>
          <br>
          <el-alert show-icon effect="dark"
            title="暗黑模式"
            type="info">
          </el-alert>
          <br>
          <el-alert
            title="成功提示的文案"
            type="success"
            description="这是一段很长的内容详情描述，这是一段很长的内容详情描述，这是一段很长的内容详情描述，这是一段很长的内容详情描述，这是一段很长的内容详情描述"
            show-icon>
          </el-alert>
        </div>
        <el-divider></el-divider>

        <h2>Loading</h2>
        <div v-loading="loading">
          <el-button @click="openLoading">{{ loading? '加载中...' : '点我加载' }}</el-button>
        </div>
        <el-divider></el-divider>

        <h2>Message</h2>
        <div>
          <el-button @click="showMessage">显示消息</el-button>
        </div>
        <el-divider></el-divider>

        <h2>MessageBox</h2>
        <div>
          <el-button @click="openMessageBox">打开消息确认框</el-button>
        </div>
        <el-divider></el-divider>

        <h2>Notification</h2>
        <div>
          <el-button @click="notify">显示通知</el-button>
        </div>
        <el-divider></el-divider>

        <h2>Menu</h2>
        <div>
          <el-menu :default-active="activeMenu">
            <el-menu-item index="1">菜单一</el-menu-item>
            <el-menu-item index="2">菜单二</el-menu-item>
            <el-submenu index="3">
              <template slot="title">菜单三</template>
              <el-menu-item index="3-1">子菜单一</el-menu-item>
              <el-menu-item index="3-2">子菜单二</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <el-divider></el-divider>

        <h2>Tabs</h2>
        <div>
          <el-tabs v-model="activeTab" >
            <el-tab-pane label="用户管理" name="user">
              用户管理内容
            </el-tab-pane>
            <el-tab-pane label="角色管理" name="role">
              角色管理内容
            </el-tab-pane>
            <el-tab-pane label="权限管理" name="permission">
              权限管理内容
            </el-tab-pane>
          </el-tabs>
        </div>
        <el-divider></el-divider>

        <h2>Dialog</h2>
        <div>
          <el-button type="text" @click="openDialog">打开对话框</el-button>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible">
            <span>这是一条对话框内容</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <el-divider></el-divider>

        <h2>Tooltip</h2>
        <div>
          <el-tooltip class="item" effect="dark" content="提示内容" placement="top">
            <el-button>挂载提示</el-button>
          </el-tooltip>
        </div>
        <el-divider></el-divider>

        <h2>Popover</h2>
        <div>
          <el-popover
            trigger="click"
            title="标题"
            width="200">
            <p>这是 popover 的内容</p>
            <el-button slot="reference">点击触发</el-button>
          </el-popover>
        </div>
        <el-divider></el-divider>

        <h2>Card</h2>
        <div>
          <el-card>
            <h3>卡片标题</h3>
            <div>卡片内容</div>
            <el-button type="primary">操作按钮</el-button>
          </el-card>
        </div>
        <el-divider></el-divider>

        <h2>Carousel</h2>
        <div>
          <el-carousel indicator-position="outside" arrow="always">
            <el-carousel-item v-for="item in carouselItems" :key="item.id">
              <h3>{{ item.text }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-divider></el-divider>

        <h2>Collapse</h2>
        <div>
          <el-collapse>
            <el-collapse-item title="折叠面板一" name="1">
              <div>这里是内容一</div>
            </el-collapse-item>
            <el-collapse-item title="折叠面板二" name="2">
              <div>这里是内容二</div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <el-divider></el-divider>

        <h2>Avatar</h2>
        <div>
          <el-avatar size="large">A</el-avatar>
          <el-avatar src="https://via.placeholder.com/150" size="small"></el-avatar>
        </div>
        <el-divider></el-divider>
      </el-main>
    </el-container>
  </div>

  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.2/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script> -->
  <script src="./lib/vue.js"></script>
  <script src="./lib/element-ui/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        selected: '',
        radio: '',
        checkbox: [],
        inputText: '',
        inputNumber: 1,
        cascaderValue: [],
        cascaderOptions: [
          {
            value: 'zhinan',
            label: '指南',
            children: [
              {
                value: 'shejiyuanze',
                label: '设计原则',
                children: [
                  {
                    value: 'yizhi',
                    label: '一致'
                  },
                  {
                    value: 'fankui',
                    label: '反馈'
                  },
                  {
                    value: 'xiaolv',
                    label: '效率'
                  },
                  {
                    value: 'keai',
                    label: '可控'
                  }
                ]
              },
              {
                value: 'daohang',
                label: '导航',
                children: [
                  {
                    value: 'yingyonghao',
                    label: '应用导航'
                  },
                  {
                    value: 'biaoda',
                    label: '标导航'
                  }
                ]
              }
            ]
          }
        ], // 需要填充选项数据
        switchValue: false,
        sliderValue: 50,
        date: '',
        rate: 3,
        transferValue: [], // 需要填充选项数据
        transferOptions: [
          { key: 1, label: '选项1' },
          { key: 2, label: '选项2' },
          { key: 3, label: '选项3' },
        ], // 需要填充选项数据
        tableData: [
          { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
        ], // 需要填充表格数据
        treeData: [
          {
            label: '一级 1',
            children: [
              {
                label: '二级 1-1',
                children: [
                  {
                    label: '三级 1-1-1'
                  },
                  {
                    label: '三级 1-1-2'
                  }
                ]
              },
              {
                label: '二级 1-2',
                children: [
                  {
                    label: '三级 1-2-1'
                  },
                  {
                    label: '三级 1-2-2'
                  }
                ]
              }
            ]
          },
          {
            label: '一级 2',
            children: [
              {
                label: '二级 2-1',
                children: [
                  {
                    label: '三级 2-1-1'
                  },
                  {
                    label: '三级 2-1-2'
                  }
                ]
              },
              {
                label: '二级 2-2',
                children: [
                  {
                    label: '三级 2-2-1'
                  },
                  {
                    label: '三级 2-2-2'
                  }
                ]
              }
            ]
          }
        ], // 需要填充树结构数据
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        currentPage: 1,
        pageSize: 10,
        totalItems: 100, // 假设总数
        activeMenu: '1',
        activeTab: 'user',
        dialogVisible: false,
        carouselItems: [
          { id: 1, text: '轮播内容 1' },
          { id: 2, text: '轮播内容 2' },
          { id: 3, text: '轮播内容 3' }
        ],
        loading: false, // 控制加载状态
      },
      methods: {
        openLoading() {
          this.loading = true;
          // 模拟加载过程
          setTimeout(() => {
            this.loading = false;
          }, 2000);
        },
        showMessage() {
          this.$message({
            type: 'info', // success/warning/info/error
            message: '这是一条消息提示',
            duration: 0, // 0 表示消息不自动关闭
            showClose: true // 显示关闭按钮
          });
        },
        openMessageBox() {
          this.$msgbox({
            title: '标题',
            message: '这是一条消息确认框内容'
          });
        },
        notify() {
          this.$notify({
            title: '通知',
            message: '这是一条通知内容',
            type: 'success'
          });
        },
        openDialog() {
          this.dialogVisible = true;
        },
        handleCurrentChange(newPage) {
          this.currentPage = newPage;
          // 处理页面变化逻辑
        },
      }
    });

  </script>

</body>
</html>
